<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Foundry Documentation</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/flexslider.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/ytplayer.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
    	<style>
    		.accordion li.active .content{ max-height: none; }
    		section:nth-of-type(odd){ background: #f8f8f8; }
    		section:nth-of-type(odd) .accordion-1 .title{ background: #eee; }
            .indent{ margin-left: 15px; }
            h5.uppercase{ font-weight: bold; }
    	</style>
    </head>
    <body>
        <div class="nav-container">
            <a id="top"></a>
            <nav class="bg-dark">
                <div class="nav-bar">
                    <div class="module left">
                        <a href="index.html">
                            <img class="logo logo-light" alt="Foundry" src="img/logo-light.png" />
                            <img class="logo logo-dark" alt="Foundry" src="img/logo-dark.png" />
                        </a>
                    </div>
                    <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                        <i class="ti-menu"></i>
                    </div>
                    <div class="module-group left">
                        <div class="module left">
                            <ul class="menu">
                                <li class="has-dropdown">
                                    <a href="#">
                                        Contents
                                    </a>
                                    <ul class="mega-menu">
                                        <li>
                                            <ul>
                                                <li>
                                                    <a href="#intro" class="inner-link">
                                                        Introduction</a>
                                                </li>
                                                <li>
                                                    <a href="#structure" class="inner-link">
                                                        Structure</a>
                                                </li>
                                                <li>
                                                    <a href="#grid" class="inner-link">
                                                        Grid</a>
                                                </li>
                                                <li>
                                                    <a href="#spacing" class="inner-link">
                                                        Spacing</a>
                                                </li>
                                                <li>
                                                    <a href="#navigation" class="inner-link">
                                                        Navigation</a>
                                                </li>
                                                
                                                <li>
                                                    <a href="#colours" class="inner-link">
                                                        Colour Schemes</a>
                                                </li>
                                                <li>
                                                    <a href="#sliders" class="inner-link">
                                                        Sliders</a>
                                                </li>
                                                <li>
                                                    <a href="#backgrounds" class="inner-link">
                                                        Image Backgrounds</a>
                                                </li>
                                                <li>
                                                    <a href="#icons" class="inner-link">
                                                        Icons</a>
                                                </li>
                                                <li>
                                                    <a href="#modals" class="inner-link">
                                                        Modals</a>
                                                </li>
                                                <li>
                                                    <a href="#modals-embed" class="inner-link">
                                                        Modals - Vimeo / Youtube</a>
                                                </li>
                                                <li>
                                                    <a href="#notifications" class="inner-link">
                                                        Notifications</a>
                                                </li>
                                                <li>
                                                    <a href="#portfolio" class="inner-link">
                                                        Portfolio</a>
                                                </li>
                                                <li>
                                                    <a href="#flickr" class="inner-link">
                                                        Flickr Feeds</a>
                                                        <span class="label">NEW!</span>
                                                </li>
                                                <li>
                                                    <a href="#instagram" class="inner-link">
                                                        Instagram Feeds</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                            	<li>
                                                    <a href="#twitter" class="inner-link">
                                                        Twitter Feeds</a>
                                                </li>
                                                <li>
                                                    <a href="#disqus" class="inner-link">
                                                        Disqus Comments</a>
                                                </li>
                                                <li>
                                                    <a href="#maps" class="inner-link">
                                                        Maps Using Google API</a>
                                                </li>
                                                <li>
                                                    <a href="#getting-an-api-key" class="inner-link indent">
                                                        Getting an API Key</a>
                                                </li>
                                                <li>
                                                    <a href="#setting-map-address" class="inner-link indent">
                                                        Setting Map Address</a>
                                                </li>  
                                                <li>
                                                    <a href="#styling-your-map" class="inner-link indent">
                                                        Styling Your Map</a>
                                                </li> 
                                                <li>
                                                    <a href="#map-markers" class="inner-link indent">
                                                        Map Markers</a>
                                                </li>       
                                                <li>
                                                    <a href="#map-zoom-level" class="inner-link indent">
                                                        Map Zoom Level</a>
                                                </li>
                                                <li>
                                                    <a href="#embedded-iframe-map" class="inner-link">
                                                        Maps Using iframe</a>
                                                </li>
                                                <li>
                                                    <a href="#mail1" class="inner-link">
                                                        Mail Via SMTP</a>
                                                </li>
                                                <li>
                                                    <a href="#mail2" class="inner-link">
                                                        Mail Via native PHP</a>
                                                </li>
                                                <li>
                                                    <a href="#referrer" class="inner-link">
                                                        Mail Referrer</a>
                                                </li>
                                                <li>
                                                    <a href="#confirmation" class="inner-link">
                                                        Mail Form Redirect</a>
                                                </li>
                                                <li>
                                                    <a href="#ajax-mailchimp-campaignmonitor" class="inner-link">
                                                        Ajax MailChimp and CM</a>
                                                </li>
                                                <li>
                                                    <a href="#iframe-mailchimp-campaignmonitor" class="inner-link">
                                                        MailChimp & C Monitor</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                	<a href="http://mediumrare.ticksy.com/">Visit Support Forum</a>
                                </li>
                            </ul>
                    </div>
                    <!--end of module group-->
                </div>
            	</div>
            </nav>
        </div>
        <div class="main-container">
            <section class="page-title page-title-1 image-bg overlay parallax">
				<div class="background-image-holder">
					<img alt="Background Image" class="background-image" src="img/home2.jpg">
				</div>
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<h2 class="uppercase mb0">Foundry Documentation</h2>
						</div>
					</div>
					<!--end of row-->
				</div>
				<!--end of container-->
			</section>
            <a id="intro"></a>
            <section>
            	<div class="container">
            		<div class="row">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Introduction</h4>
            				<hr>
            				<p class="lead">
            					Thankyou for purchasing Foundry HTML Template with Variant Page Builder. This documentation will help to familiarise you with how Foundry is structured and how to use the template features. At times, you may need further assistance if something is either not covered, or clear in the documentation. In these instances, you can open a support ticket at our dedicated support forum: <a href="http://mediumrare.ticksy.com">Medium Rare - Ticksy</a>
            				</p>
            				<p class="lead mb64">
            					Many thanks,<br />
            					<em>Medium Rare</em>
            				</p>
            				<div class="feature boxed mb80">
            					<h5 class="uppercase text-center">Notice:</h5>
            					<p class="lead">
            						While this documentation covers global template features, the individual element pages found in the download package provide advice on individual elements and how they can be used and modified.
            					</p>
            					<ul class="accordion accordion-1 mb0">
                                <li>
                                    <div class="title bordered feature text-center">
                                        <span>List Elements</span>
                                    </div>
                                    <div class="content text-center">
                                    	<ul>
                                    		<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-buttons.html">
													<i class="ti-link"></i> Buttons</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-tabs.html">
													<i class="ti-layout-tab"></i> Tabs</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-progress.html">
													<i class="ti-rocket"></i> Progress Bars</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-accordions.html">
													<i class="ti-layout-accordion-separated"></i> Accordions</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-alerts.html">
													<i class="ti-flag-alt"></i> Alerts</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-form-inputs.html">
													<i class="ti-pencil-alt"></i> Form Inputs</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-countdown.html">
													<i class="ti-alarm-clock"></i> Countdowns</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-modals.html">
													<i class="ti-layout-slider-alt"></i> Modals</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-pricing.html">
													<i class="ti-money"></i> Pricing Tables</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-icon-boxes.html">
													<i class="ti-eye"></i> Icon Boxes</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-widgets.html">
													<i class="ti-layout-media-right"></i> Widgets</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-typography.html">
													<i class="ti-text"></i> Typography</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-grid.html">
													<i class="ti-view-grid"></i> Grid Structure</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-textimage.html">
													<i class="ti-layout-list-large-image"></i> Text &amp; Image</a>
											</li>
											<li>
												<a target="_blank" href="http://foundry.mediumra.re/elements-intros.html">
													<i class="ti-microphone"></i> Intro Sections</a>
											</li>
                                    	</ul>
                                    </div>
                                </li>
                            </ul>
            				</div>
            			</div>
            		</div><!--end of row-->
            		
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2">
            				<h5 class="uppercase mb40 text-center">Before We Begin</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>I'm getting WordPress install errors!</span>
                                    </div>
                                    <div class="content">
                                        <p>
                                            Foundry is a HTML template, not a WordPress theme. It does not work with WordPress out of the box. If you'd like a refund, you'll need to get in touch with Envato support, as they handle all payments for Themeforest.
                                        </p>
                                    </div>
                                </li>
                                
                                <li>
                                    <div class="title">
                                        <span>I've purchased, but Variant still wont let me export!</span>
                                    </div>
                                    <div class="content">
                                        <p>
                                            Ensure that you are opening Variant from the builder.html file inside the variant folder of your download package. You don't need to use the builder from our demo server.
                                        </p>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="structure"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Structure</h4>
            				<hr>
            				<p class="lead">
								Foundry is a multipage HTML template. All pages are housed within their own .html file and reside in the root directory of the template. All pages require access to the template's CSS and Javascript files, these files reside within the CSS and JS directories.
            				</p>
            			</div>
            		</div><!--end of row-->
            		
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2">
            				<h5 class="uppercase mb40 text-center">Structure FAQ</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>What do I need to upload to my server?</span>
                                    </div>
                                    <div class="content">
                                        <p>
                                            You'll need to upload all HTML files along with all directories (css,js,mail,video,img) in the structure that they appear in your download package. That is, all HTML files should reside in the root directory, and all other files should reside inside their associated folder.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>Should I upload the Variant folder?</span>
                                    </div>
                                    <div class="content">
                                        <p>
											No, you don't need to upload the Variant folder - the builder works offline and does not require a server to function.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>I uploaded the template but the page looks strange and bare!</span>
                                    </div>
                                    <div class="content">
                                        <p>
											This is usually a result of the CSS folder not being uploaded correctly. Ensure the CSS folder is uploaded in the same directory as your HTML files so they have correct access.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>Where should I make my custom CSS style changes?</span>
                                    </div>
                                    <div class="content">
                                        <p>
											Ensure that you only make style changes inside <strong>custom.css</strong>. This will make it much easier to update the template later - you'll only need to preserve your custom.css file.
                                        </p>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="grid"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Grid</h4>
            				<hr>
            				<p class="lead">
								Foundry is based on Bootstrap 3.1 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a brief example for a section with three equal columns (3 for tablet and up, 6 for smartphones).
            				</p>
            				<pre>
            				
	&lt;div class="container"&gt;
		&lt;div class="row"&gt;
			&lt;div class="col-md-4 col-sm-6"&gt;...&lt;/div&gt;
			&lt;div class="col-md-4 col-sm-6"&gt;...&lt;/div&gt;
			&lt;div class="col-md-4 col-sm-6"&gt;...&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
            				</pre>
            				<p>
            					For a more detailed explanation of the Bootstrap grid - see the Bootstrap documentation <a href="http://getbootstrap.com/css/#grid">here</a>
            				</p>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="spacing"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Spacing</h4>
            				<hr>
            				<p class="lead">
								Foundry uses helper classes to space elements out from one another on the page. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.
	            			</p>
	            			<p class="lead">
	            				Example: You have a large h1 that you'd like to push 80px away from the subsequent content by adding margin to the bottom. You can use Foundry's spacing classes to help:
	            			</p>
            				<pre>
            				
	&lt;h1 class="mb80"&gt;I'm a large heading&lt;/h1&gt;
	&lt;p&gt;
		....
	&lt;/p&gt;
	&lt;div&gt;
		...
	&lt;/div&gt;
            				</pre>
            				<p class="lead mb64">
            					If we wanted to use padding on that element we would have used 'pb' instead of 'mb' where 'pb' refers to 'padding-bottom'.
            				</p>
            				<h5 class="uppercase">What about mobile?</h5>
            				<p class="lead">
            					Similarly, we can use 'mb-xs-40' if we wanted to halve that margin amount on a mobile device where 80px of margin might be too large.
            				</p>
            				<pre>
            				
	&lt;h1 class="mb80 mb-xs-40"&gt;I'm a large heading&lt;/h1&gt;
	&lt;p&gt;
		....
	&lt;/p&gt;
	&lt;div&gt;
		...
	&lt;/div&gt;
            				</pre>
            				<p class="lead mb64">
            				 Note, we still have mb80 so the heading pushes 80px on desktop / tablet and 40px on mobile. Mobile classes will override when the screen's width is below 767px.
            				</p>
            				<h5 class="uppercase">Available classes</h5>
            				<p class="lead">
            					Foundry's spacing works on multiples of 8. This means you can use classes as such: mb8, mb16, mb24, mb32, mb40, mb48 and so on, but you can't use 'mb61' as it's not a multiple of 8.
            				</p>
            				<ul class="accordion accordion-1 mb0">
                                <li>
                                    <div class="title">
                                        <span>List Of Classes</span>
                                    </div>
                                    <div class="content">
                                       <pre>
                                       
	.mb0{ margin-bottom: 0 !important; }
	.mb8{ margin-bottom: 8px; }
	.mb16{ margin-bottom: 16px; }
	.mb24{ margin-bottom: 24px; }
	.mb30{ margin-bottom: 30px; }
	.mb32{ margin-bottom: 32px; }
	.mb40{ margin-bottom: 40px; }
	.mb48{ margin-bottom: 48px; }
	.mb56{ margin-bottom: 56px; }
	.mb64{ margin-bottom: 64px; }
	.mb72{ margin-bottom: 72px; }
	.mb80{ margin-bottom: 80px; }
	.mb88{ margin-bottom: 88px; }
	.mb96{ margin-bottom: 96px; }
	.mb104{ margin-bottom: 104px; }
	.mb112{ margin-bottom: 112px; }
	.mb120{ margin-bottom: 120px; }
	.mb160{ margin-bottom: 160px; }

	.mt0{ margin-top: 0 !important; }
	.mt8{ margin-top: 8px; }
	.mt16{ margin-top: 16px; }
	.mt24{ margin-top: 24px; }
	.mt32{ margin-top: 32px; }
	.mt40{ margin-top: 40px; }
	.mt48{ margin-top: 48px; }
	.mt56{ margin-top: 56px; }
	.mt64{ margin-top: 64px; }
	.mt72{ margin-top: 72px; }
	.mt80{ margin-top: 80px; }
	.mt88{ margin-top: 88px; }
	.mt96{ margin-top: 96px; }
	.mt104{ margin-top: 104px; }
	.mt112{ margin-top: 112px; }
	.mt120{ margin-top: 120px; }

	.p32{ padding: 0 32px; }
	.p24{ padding: 24px; }
	.p0{ padding: 0; }
	.pt0{ padding-top: 0; }
	.pt8{ padding-top: 8px; }
	.pt16{ padding-top: 16px; }
	.pt24{ padding-top: 24px; }
	.pt32{ padding-top: 32px; }
	.pt40{ padding-top: 40px; }
	.pt48{ padding-top: 48px; }
	.pt64{ padding-top: 64px; }
	.pt72{ padding-top: 72px; }
	.pt80{ padding-top: 80px; }
	.pt88{ padding-top: 88px; }
	.pt96{ padding-top: 96px; }
	.pt104{ padding-top: 104px; }
	.pt112{ padding-top: 112px; }
	.pt120{ padding-top: 120px; }
	.pt160{ padding-top: 160px; }
	.pt180{ padding-top: 180px; }
	.pt240{ padding-top: 240px; }

	.pb0{ padding-bottom: 0; }
	.pb8{ padding-bottom: 8px; }
	.pb16{ padding-bottom: 16px; }
	.pb24{ padding-bottom: 24px; }
	.pb32{ padding-bottom: 32px; }
	.pb40{ padding-bottom: 40px; }
	.pb48{ padding-bottom: 48px; }
	.pb56{ padding-bottom: 56px; }
	.pb64{ padding-bottom: 64px; }
	.pb72{ padding-bottom: 72px; }
	.pb80{ padding-bottom: 80px; }
	.pb88{ padding-bottom: 88px; }
	.pb96{ padding-bottom: 96px; }
	.pb104{ padding-bottom: 104px; }
	.pb112{ padding-bottom: 112px; }
	.pb120{ padding-bottom: 120px; }
	.pb160{ padding-bottom: 160px; }
	.pb180{ padding-bottom: 180px; }
	.pb240{ padding-bottom: 240px; }
                                       </pre>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="navigation"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Navigation</h4>
            				<hr>
            				<p class="lead mb64">
								Foundry features a robust multi-function navigation with support for double level dropdowns, mega menus (multi-column dropdown) and widgets.
            				</p>
            				<h5 class="uppercase">Navigation Structure</h5>
            				<p class="lead">
            					The nav bar is made up of 'modules' each function inside the nav bar is considered a module (eg: The logo is a module, the menu is a module, and the widgets are modules).
            				</p>
            				<pre>
            				
	&lt;div class="nav-bar"&gt;
		&lt;div class="module left"&gt;
			&lt;img alt="logo" src=".." /&gt;
		&lt;/div&gt;
		&lt;div class="module-left"&gt;
			&lt;ul class="menu"&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
            				</pre>
            				<h5 class="uppercase">Navigation Classes</h5>
            				<p class="lead">
								By default the nav bar will appear as a white bar at the top of the page. You can modify this appearance in a couple of ways by adding a class to the 'nav' element:
								<ul class="bullets col-md-offset-1">
									<li><strong>.bg-dark</strong> - Will make the background of the nav dark and the text content of the nav light.</li>
									<li><strong>.absolute</strong> - Will make nav overlap the first section on the page by making is 'position: absolute'</li>
									<li><strong>.transparent</strong> - Will remove the background color from the nav, use this class in conjunction with '.absolute' to achieve the overlay effect.</li>
								</ul>
            				</p>
            			</div>
            		</div><!--end of row-->
            		
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2">
            				<h5 class="uppercase mb40 text-center">Navigation FAQ</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>How do I make the logo bigger / smaller?</span>
                                    </div>
                                    <div class="content">
                                        <p>
											You can control the height of the logo using the .logo selector in CSS. By default the logo is set to a max-height of 60% of the nav bar. To adjust this add the following code to your custom.css file:
                                        </p>
                                        <pre>
                                        
	.logo{ max-height: ##%; }
                                        </pre>
                                        <p>
                                        	Where ## is your desired percentage. Naturally, if you wanted a bigger logo, make it greater than 60% and less, for a smaller logo. Keep in mind the logo also has a max-width of 150px, so if necessary, you may need to set the 'max-width' to 'none' if your logo is quite large.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>How do I make the nav bar itself bigger / smaller?</span>
                                    </div>
                                    <div class="content">
                                        <p>
											You can control the height of the nav using the .nav-bar selector in CSS. By default the nav is set to a max-height of 55px. To adjust this add the following code to your custom.css file:
                                        </p>
                                        <pre>
                                        
	.nav-bar{ height: ##px; max-height: ##px; line-height: (##-3)px; }
                                        </pre>
                                        <p>
                                        	Where ## is your desired height. Ensure the height and max-height are the same and the line-height is 3 pixels less than the height and max-height, this will ensure the logo and menu remain vertically centered inside the nav bar.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>I want to add more columns to the mega menu</span>
                                    </div>
                                    <div class="content">
                                        <p>
											The mega menu is structured in a list arrangement. Each column is a 'li' list item with a 'span' for column title and 'ul' inside for the containing elements. To add columns, simply copy a list item:
											<pre>
											
	&lt;ul class="mega-menu"&gt;
		&lt;li&gt;
			&lt;ul&gt;
				&lt;li&gt;
					&lt;span&gt;Column Title&lt;/span&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="#"&gt;Menu Link&lt;/a&gt;
				&lt;/li&gt;
			&lt;ul&gt;
		&lt;/li&gt;
		
		&lt;li&gt;
			&lt;ul&gt;
				&lt;li&gt;
					&lt;span&gt;Column Title&lt;/span&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="#"&gt;Menu Link&lt;/a&gt;
				&lt;/li&gt;
			&lt;ul&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
											</pre>
                                        </p>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="colours"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Colour Schemes</h4>
            				<hr>
            				<p class="lead mb64">
								Foundry has a number of included colour schemes that you can switch to at any time. Each colour scheme has its own CSS file (eg: theme-red.css). To switch colour schemes, simply replace the theme.css reference in the head of your document with the appropriate colour scheme css file.
            				</p>
            				<h5 class="uppercase">Colour Helper Classes</h5>
            				<p class="lead">
            					When creating your own elements you may wish to use the template's colours in order to keep things visually consistent. You can do this with the predefined colour classes. Add these classes to any HTML element to modify their colour properties:
            				</p>
            				<ul class="bullets col-md-offset-1">
								<li><strong>.bg-dark</strong> - Will make the background of an element dark and the text light.</li>
								<li><strong>.bg-secondary</strong> - Will make background of an element an off-white, light grey color. This is useful when you want to breakup a mostly white page.</li>
								<li><strong>.bg-primary</strong> - Will make the background of an element the primary theme color (in this case green) and the text, white.</li>
							</ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="sliders"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Sliders</h4>
            				<hr>
            				<p class="lead mb64">
								Foundry uses the Flexslider jQuery plugin to handle all slider behaviour including image sliders and text sliders. The appearance of the slider will depend on which class you use to initialize it. Slider elements are always structured as so:
            				</p>
            				<pre>
            				
	&lt;div&gt;
		&lt;ul class="slides"&gt;
			&lt;li&gt;...&lt;/li&gt;
			&lt;li&gt;...&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
            				</pre>
            				<h5 class="uppercase">Initialisation Classes</h5>
            				<p class="lead">
								Depending on your purpose for the slider, you can choose to include or exclude particular controls. Use these classes on the parent element of your 'slides' ul to initialise.
            				</p>
            				<ul class="bullets col-md-offset-1">
								<li><strong>.slider-all-controls</strong> - Includes both the arrow controls and the paging controls.</li>
								<li><strong>.slider-arrow-controls</strong> - Includes arrow controls, but not paging controls.</li>
								<li><strong>.slider-paging-controls</strong> - Includes paging controls, but not arrow controls.</li>
								<li><strong>.slider-thumb-controls</strong> - Includes thumbnail paging controls, this is only relevant for image sliders.</li>
							</ul>
            			</div>
            		</div><!--end of row-->
            		
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2">
            				<h5 class="uppercase mb40 text-center">Sliders FAQ</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>How do I change the slider timing?</span>
                                    </div>
                                    <div class="content">
                                        <p>
                                            You can do this by opening scripts.js and around line 259, locate your slider type (all-controls, arrow-controls etc). Inside the curly brackets {} add the option: slideshowSpeed followed by a number in milliseconds like so:
                                        </p>
                                         <pre>
	$('.slider-arrow-controls').flexslider({ controlNav: false, slideshowSpeed: 9000 });
                                        </pre>
                                        <p>
                                        	The above options would change the timing to 9 seconds per slide.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>How do I adjust the slide height?</span>
                                    </div>
                                    <div class="content">
                                        <p>
											The easiest way to adjust the slide height is to give your slider a custom class eg: 'my-slider', then inside your custom.css, make a rule for this class to define the height of the slides:
                                        </p>
                                         <pre>
	.my-slider .slides li{ height: ##px; }
                                        </pre>
                                        <p>
                                        	Where '##' is your desired height in pixels.
                                        </p>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="backgrounds"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Backgrounds & Parallax</h4>
            				<hr>
            				<p class="lead">
								Many elements in Foundry have images that cover the background. Often, these elements also have the parallax effect enabled.
            				</p>
            				<p class="lead">
            					To cover an element with a background image, follow this standard:
            				</p>
            				<pre class="mb64">
            				
	&lt;section class="element-to-be-covered"&gt;
		&lt;div class="background-image-holder"&gt;
			&lt;img alt="Image" src="img/background.jpg" /&gt;
		&lt;/div&gt;
		
		&lt;div class="container"&gt;
			&lt;div class="row"&gt;
				...
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;
            				</pre>
            				<h5 class="uppercase">Enabling Parallax</h5>
            				<p class="lead">
								You can easily switch on or off the parallax effect by adding (or removing) the class 'parallax' from the parent element. If we wanted the above mentioned section exhibit parallax, we would modify it as so:
            				</p>
            				<pre>
            				
	&lt;section class="element-to-be-covered parallax"&gt;
		&lt;div class="background-image-holder"&gt;
			&lt;img alt="Image" src="img/background.jpg" /&gt;
		&lt;/div&gt;
		
		&lt;div class="container"&gt;
			&lt;div class="row"&gt;
				...
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;
            				</pre>
            			</div>
            		</div><!--end of row-->
            		
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2">
            				<h5 class="uppercase mb40 text-center">Backgrounds &amp; Parallax FAQ</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>Why isn't parallax working on mobile?</span>
                                    </div>
                                    <div class="content">
                                        <p>
											The parallax effect is not yet able to be implemented reliably on mobile devices, it has therefore been disabled.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <span>My background image is being cropped!</span>
                                    </div>
                                    <div class="content">
                                        <p>
                                        	The background will always be fitted to the containing parent using the CSS 'background-size: cover' property. This means that if your parent element is relatively short (<400px) and your background image is tall (>900px) then you may experience some cropping toward the center of the image. You can adjust how the background is placed on the parent by tweaking the 'background-position' property of the element. To do this:
										</p>
										<h6 class="uppercase">HTML:</h6>
										<pre>
										
	&lt;section class="my-section"&gt;
		&lt;div class="background-image-holder"&gt;
			&lt;img alt="Image" src="img/background.jpg" /&gt;
		&lt;/div&gt;
		
		&lt;div class="container"&gt;
			&lt;div class="row"&gt;
				...
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;
										</pre>
										<h6 class="uppercase">CSS:</h6>
										<pre>
										
	.my-section{ background-position: X% Y% !importaht; }
										</pre>
										<p>
											Where X and Y relate to the point where the image should be cropped from. For example, the default setting is 50% 50%, the image is cropped toward the center vertically and horizontally.
										</p>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="icons"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Icons</h4>
            				<hr>
            				<p class="lead">
								By default, Foundry makes use of the <a href="http://themify.me/themify-icons" target="_blank">Themify</a> icon set.  Additionally, you may insert icons from other icon packs using the instructions below. 
                            </p>
                            <p class="lead">
                                Using the <a href="http://themify.me/themify-icons" target="_blank">Themify icons</a> requires you to follow simple syntax using the Themify predefined icon codes. For a list of all available icon codes, look <a href="http://themify.me/themify-icons" target="_blank">Here</a>.
            				</p>
            				<p class="lead">
            					Syntax for icons is as follows:
            				</p>
            				<pre>
            				
	&lt;i class="icon ti-twitter"&gt;&lt;/i&gt;
            				</pre>
            				<p class="mb64">
            					This would result in: <i class="icon ti-twitter"></i>
            				</p>
            				<h5 class="uppercase">Size Classes</h5>
            				<p class="lead">
								By default, the icon will appear at size 64px. You can adjust this by using some size classes:
            				</p>
            				<ul class="bullets col-md-offset-1">
								<li><strong>.icon-lg</strong> - Will make the icon 80px.</li>
								<li><strong>.icon-sm</strong> - Will make the icon 32px;</li>
							</ul>
                            <h5 class="uppercase">Other Icon Sets</h5>
                            <p class="lead">
                                While it is not recommended to use too many different packs of icons in the same page (for style consistency and page-speed reasons), Foundry offers the ability to use multiple icon packs in the same page.  In Variant Page Builder, this is handled automatically: Variant will only include the necessary CSS references for the icon packs you used in the head of the page.  We recommend staying within the bounds of one or two icon packs as the font files that are required to render the icons are often large - possibly 315KB in the case of Font Awesome.  Using too many different icon packs in your page will slow down the initial loading of the page.
                            </p>  
                            <p class="lead">
                                Each icon font pack has a corresponding css file that sets up the use of the icon web font from the fonts folder.  If you are managing your HTML manually, you will need to add or remove the following icon pack references in the <strong>&lt;head&gt;</strong> of your pages manually (one line for each icon pack you intend to use):
                            </p>
                            
                            <pre>
                            
    &lt;link href="css/pe-icon-7-stroke.css" rel="stylesheet" type="text/css" media="all"&gt;
    &lt;link href="css/et-line-icons.css" rel="stylesheet" type="text/css" media="all"&gt;
    &lt;link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all"&gt;
    &lt;link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" /&gt;
                            </pre>
                            <p class="lead">
                                Each icon set uses a slightly different class to distinguish its icons in CSS.  <br />Using as an example, the <i class="icon ti-lock icon-sm"></i><strong>lock</strong> icon which appears in many icon sets:
                             </p>
                            <p class="lead">  
                                <strong>Themify</strong><br />
                                See all available icon classes at <a href="http://themify.me/themify-icons">themify.me</a>
                            </p>
                                <pre>    
    &lt;i class="icon ti-lock">&lt;/i>
                                </pre>
                            <p class="lead">   
                                <strong>Font Awesome</strong><br />note: Font Awesome icons require an added <strong>fa</strong> class.<br />
                                See all available icon classes at <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome on Github</a>
                            </p>
                            <pre>    
    &lt;i class="icon fa fa-lock">&lt;/i> 
                            </pre>
                            <p class="lead">   
                                <strong>Elegant Themes Line Icons</strong><br />note: This is not the default class structure for ET Line Icons - we modified this as the original <strong>icon-</strong> conflicted with Foundry and Variant.<br />
                                See all available icon classes at <a href="http://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website">elegantthemes.com</a>
                            </p>
                            <pre>    
    &lt;i class="icon et-line-lock">&lt;/i> 
                            </pre>
                            <p class="lead">   
                                <strong>Pixeden 7 Stroke Line Icons</strong><br />
                                See all available icon classes at <a href="http://themes-pixeden.com/font-demos/7-stroke/">pixeden.com</a>
                            </p>
                            <pre>    
    &lt;i class="icon pe-7s-lock">&lt;/i> 
                            </pre>


            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="modals"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Modals</h4>
            				<hr>
            				<p class="lead">
								<strong>Added in v1.6</strong> Foundry now supports a robust modal system to suit a variety of use cases. Modals can be initiated in three ways: by clicking a button, after a specified time on load or automatically on load.
            				</p>
            				<h5 class="uppercase">Summon Modal by Button</h5>
            				<p class="lead">
								This modal type will show when its button corresponding button is clicked, the markup is as follows:
            				</p>
            				<pre>
            				
&lt;div class="modal-container"&gt;
	&lt;a class="btn btn-modal" href="#"&gt;Show Modal&lt;/a&gt;
	&lt;div class="foundry-modal"&gt;
		&lt;h2&gt;Modal Title&lt;/h2&gt;
		&lt;hr&gt;
		&lt;p&gt;
			...
		&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
            				</pre>
            				<p class="lead">Helpful Hints</p>
            				<ul class="bullets col-md-offset-1">
								<li>The button must have class 'btn-modal' to link it to the 'foundry-modal'</li>
								<li>You can place any HTML you like inside the 'foundry-modal' div</li>
							</ul>
							<h5 class="uppercase">Summon modal on page load</h5>
            				<p class="lead">
								This modal type will show automatically when the page loads, or after a specified time as set in the 'data-time-delay' attribute. Super handy for 'subscribe' forms on blog and magazine sites. To use this modal type, you will need to place the markup outside of the '.main-container' element in the HTML, just before the 'script' links begin.
            				</p>
            				<pre>
            				
&lt;div class="foundry_modal text-center image-bg overlay" data-time-delay="0"&gt;
	&lt;h2&gt;Hey I'm a modal title&lt;/h2&gt;
	&lt;p&gt;
		Yo, this is a modal paragraph.
	&lt;/p&gt;
&lt;/div&gt;
            				</pre>
                            <p class="lead">
                                In the above example, the modal would show immediately when the page loads as the 'data-time-delay' attribute is set to 0. This value should be assigned in milliseconds; if you wanted the modal to show after 4 seconds the attribute would read: data-time-delay="4000".
                            </p>
                            <h5 class="uppercase">Using cookies to permanently dismiss automatic modals</h5>
                            <p class="lead">
                                In some circumstances you may want your visitors to be greeted by a time delay modal <strong>only once</strong>, then allow them to dismiss the modal so that it does not show on subsequent page loads.  To do this, set a <strong>data-cookie</strong> attribute on the modal div.  The value of the <strong>data-cookie</strong> attribute can be anything, but it makes sense to name the cookie after the modal it dismisses like so:
                            </p>
                            <pre style="overflow-wrap: normal;">
                            
    data-cookie="dismissed-mailchimp-signup-modal"
                            </pre>
                            <p class="lead">
                            So, the full modal div tag would look like:
                            </p>
                            <pre style="overflow-wrap: normal;">
                            
    &lt;div class="foundry_modal text-center image-bg overlay" data-cookie="dismissed-mailchimp-signup-modal" data-time-delay="0"&gt;
                            </pre>
            				<p class="lead">
                            The cookie is set when the user clicks the close button with class <strong>modal-close</strong> and will not be set when the user clicks outside the modal to dismiss it.
                            </p>
                            <h5 class="uppercase">Hiding a modal after a certain time <span class="label">Added in v 1.7.5</span></h5>
                            <p class="lead">
                                The data-hide-after attribute allows you to hide a modal after a certain time has elapsed. The modal will automatically close so long as the user has not taken action on it (eg. clicked a button or field inside the modal).
                            </p>
                            <pre>
                            
&lt;div class="foundry_modal text-center image-bg overlay" data-hide-after="10000"&gt;
    &lt;h2&gt;Hey I'm a modal title&lt;/h2&gt;
    &lt;p&gt;
        Yo, this is a modal paragraph.
    &lt;/p&gt;
&lt;/div&gt;
                            </pre>
                            <p class="lead">
                                In the above example, the modal would hide automatically, 10 seconds after the page has loaded. The time value is measured in milliseconds, this on this example 10000 = 10 seconds.<br /><br />
                                <strong>Note:</strong> The data-hide-after attribute counts from when the page loads, not from when the modal first shows. So if you delayed the showing of the modal by 6 seconds, and used a hide after value of 10 seconds, the modal would only show for 4 seconds in total before closing. 
                            </p>
            				
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="modals-embed"></a>
            <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Modals - Vimeo / Youtube</h4>
                            <hr>
                            <p class="lead">
                                <strong>Added in v1.8</strong> Opening a Vimeo or Youtube video in a modal has been overhauled in Foundry 1.8
                            </p>
                            <p class="lead">
                                Embedding a Vimeo or Youtube video in a modal now requires adherence to the following markup:
                            </p>
                            <pre>
                            
&lt;div class="modal-container"&gt;
    &lt;div class="btn-modal"&gt;Play&lt;/div&gt;
    &lt;div class="foundry_modal no-bg"&gt;
        &lt;iframe data-provider="vimeo" data-video-id="25737856" data-autoplay="1"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
&lt;/div&gt;
                            </pre>
                            <p>
                            *Note: you may use any element as the 'trigger' for the modal, it need only have the class 'btn-modal' as above.
                            </p>
                            <p class="lead">The data attributes</p>
                            <ul class="bullets col-md-offset-1">
                                <li>'data-provider' refers to either 'youtube' or 'vimeo' these are the only two providers currently supported.</li>
                                <li>'data-video-id' refers to the videos unique ID as found in the url for the video (screenshot below)</li>
                                <li>'data-autoplay' indicates whether you want the video to autoplay when the modal is opened set '1' for true and '0' for false</li>
                            </ul>
                            <p>The 'video-id' from a <strong>Youtube</strong> video's URL:</p>
                            <img alt="Youtube Video Id" src="img/embed1.jpg" /><br /><br />
                            <p>The 'video-id' from a <strong>Vimeo</strong> video's URL:</p>
                            <img alt="Youtube Video Id" src="img/embed2.jpg" />
                            
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="notifications"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Notifications</h4>
            				<hr>
            				<p class="lead">
								<strong>Added in v1.6</strong> Foundry now supports popup notifications on any page. This notification will show when the page loads and requires the user to dismiss it. Notifications are great for prompting users to accept cookies agreements or announcing a new feature of your site / service.
            				</p>
            				<h5 class="uppercase">Notification Markup</h5>
            				<pre>
            				
&lt;div class="modal-strip bg-white"&gt;        	
	&lt;div class="container"&gt;
		&lt;div class="row"&gt;
			&lt;div class="col-sm-12 overflow-hidden"&gt;
				&lt;i class="ti-info-alt icon icon-sm pull-left color-primary"&gt;&lt;/i&gt;
				&lt;p class="mb0 pull-left"&gt;Hey there user, our site uses cookies and by continuing to browse, you're agreeing to our &lt;a href="#"&gt;terms of service&lt;/a&gt;&lt;/p&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;a class="btn btn-sm close-modal"&gt;Ok, I agree&lt;/a&gt;
&lt;/div&gt;
            				</pre>
            				<h5 class="uppercase">Setting the 'close modal' method</h5>
            				<p class="lead">
								In the above example, the modal will be closed when the user clicks the 'Ok, I agree' button. The button must have class 'close-modal'. If you choose not to have a button, a cross icon will appear by default to allow the user to close the modal.
            				</p>
            				<p class="lead">Helpful Hints</p>
            				<ul class="bullets col-md-offset-1">
								<li>You can use any of Foundry's colour classes to enhance notifications (eg: .bg-dark, .bg-primary, .bg-secondary)</li>
							</ul>

                            <h5 class="uppercase">Using cookies to permanently dismiss automatic notifications</h5>
                            <p class="lead">
                                In some circumstances you may want your visitors to be greeted by a time delay notification <strong>only once</strong>, then allow them to dismiss the notification so that it does not show on subsequent page loads.  To do this, set a <strong>data-cookie</strong> attribute on the notification div.  The value of the <strong>data-cookie</strong> attribute can be anything, but it makes sense to name the cookie after the notification it dismisses like so:
                            </p>
                            <pre style="overflow-wrap: normal;">
                            
    data-cookie="dismissed-july-2015-news-notification"
                            </pre>
                            <p class="lead">
                            So, the full notification div tag would look like:
                            </p>
                            <pre style="overflow-wrap: normal;">
                            
    &lt;div class="modal-strip bg-white" data-cookie="dismissed-july-2015-news-notification""&gt;
                            </pre>
                            <p class="lead">
                            The cookie is set when the user clicks the close button on the notification with class <strong>modal-close</strong>.
                            </p>
                            
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="portfolio"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Portfolio</h4>
            				<hr>
            				<p class="lead mb54">
								Portfolios in Foundry are achieved using the Masonry jQuery plugin by Desandro. This plugin ensures that all projects 'slot' together all snuggly. You can find a comprehensive rundown on the Masonry plugin <a href="http://masonry.desandro.com/" target="_blank">here</a>.
            				</p>
            				<h5 class="uppercase">Managing project filters</h5>
            				<p class="lead">
            					Some portfolio pages use filters to help the user better hone in in the content relevant to them. Managing these filters is as simple as setting the 'data-filter' attribute on the project's div. The filters will automatically be created as the page loads, so no need to create individual filters and link them up!
            				</p>
            				<p class="lead">
            					For example:
            				</p>
            				<pre>
            				
	&lt;div class="project" data-filter="People"&gt;
			&lt;div class="image-tile inner-title hover-reveal text-center"&gt;
				...
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;div class="project" data-filter="Animals"&gt;
		&lt;div class="image-tile inner-title hover-reveal text-center"&gt;
			...
		&lt;/div&gt;
	&lt;/div&gt;
	
            				</pre>
            				<p class="lead">
            				 	Would result in 2 filters being created as the page loads, one for 'People' and one for 'Animals'. If we changed the second to 'People', the 'Animals' filter would simply not be created next time the page loads.
            				</p>
            			</div>
            		</div><!--end of row-->
            		
            	</div><!--end of container-->
            </section>
            <a id="flickr"></a>
            <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Flickr Feeds</h4>
                            <hr>
                            <p class="lead">
                                Foundry supports the embedding of Flickr albums. Note that you must specify an album to show - the plugin can not simply show the latest photos from a photostream.
                            </p>
                            <p class="lead">
                                Setting up a Flickr feed requires you to have 2 pieces of information, the Flickr ID (that is, the uder id) and the album ID (also referred to as the 'set' on Flickr).
                            </p> 
                            <h5 class="uppercase">To get the Flickr ID</h5>
                            <p class="lead">
                                Head to <a target="_blank" href="http://idgettr.com/">this link</a> and type your username.
                            </p>
                            <h5 class="uppercase">To get the Album ID</h5>
                            <p class="lead">
                                Open the album in your browser and copy the long string of numbers in the URL bar.
                            </p>
                            <pre>
                            
    &lt;ul class="flickr-feed masonry" data-user-id="USERID" data-album-id="ALBUMID"&gt;&lt;/ul&gt;
                            </pre>
                        </div>
                    </div><!--end of row-->
                    
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <h5 class="uppercase mb40 text-center">Flickr FAQ</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>Only 20 images are showing</span>
                                    </div>
                                    <div class="content">
                                        <p>
                                            Unfortunately at this time, Flickr only served 20 of the latest images from any album, we'll update the template should these restrictions change.
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="instagram"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Instagram Feeds</h4>
            				<hr>
            				<p class="lead">
								Some elements in Foundry offer the ability to embed an Instagram image feed. These elements use a data attribute 'data-user-name' in conjunction with the Spectragram jQuery plugin to fetch the latest images from the specified Instragram account.
            				</p>
            				<p class="lead">
            					Setting up an Instagram element is as simple as placing your username inside the data attribute like so:
            				</p>
            				<pre>
            				
	&lt;div class="instafeed" data-user-name="my-account-name"&gt;
		&lt;ul&gt;&lt;/ul&gt;
	&lt;/div&gt;
            				</pre>
            			</div>
            		</div><!--end of row-->
            		
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2">
            				<h5 class="uppercase mb40 text-center">Instagram FAQ</h5>
                            <ul class="accordion accordion-1">
                                <li>
                                    <div class="title">
                                        <span>My feed isn't showing correctly!</span>
                                    </div>
                                    <div class="content">
                                        <p>
											By default, the Spectragram plugin is setup using our own Client ID and Access Token - if you have any issue using this feature, you should create your own Client ID and Access Token and place theme inside scripts.js (~line 262)
										</p>
                                        <p>
                                        	To gain access to your Client ID and Access Token, use this tutorial: <a href="http://jelled.com/instagram/access-token" target="_blank">here</a>
                                        </p>
                                    </div>
                                </li>
                            </ul>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="twitter"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Twitter Feeds</h4>
            				<hr>
            				<p class="lead mb64">
								The Twitter feed element uses a HTML5 data attribute called 'data-widget-id' to determine which feed to display. Changing it requires you to create a widget from your Twitter account.
            				</p>
            				<h5 class="uppercase">Creating a Twitter Widget</h5>
            				<ul class="bullets col-md-offset-1">
								<li>Go to the 'Settings' page of your Twitter account and clicking 'Widgets'</li>
								<li>Click 'Create New' and then 'Create Widget'</li>
								<li>Go back to the 'Widgets' page and click 'Edit' on your newly created widget</li>
								<li>From here you need to copy the widget id out of the url bar. The widget id is the long numerical string after /widgets/ and before /edit and paste it into the 'data-widget-id' attribute on the tweets div.</li>
							</ul>
							<h5 class="uppercase">Twitter Element Markup</h5>
							<p>
								Once you've got your widget ID, paste it into the data-widget-id element of the tweets div. Leave the tweets div empty, it will be populated by the Twitterfetcher plugin when the page loads.
							</p>
							<pre>
	
	&lt;div class="tweets-feed" data-widget-id="492085717044981760"&gt;&lt;/div&gt;
							</pre>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="disqus"></a>
             <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Disqus Comments</h4>
                            <hr>
                            <p class="lead">
								Disqus is a service for managing comments on your website. If you are using Foundry as your blog, this means it is now easier than ever to manage comments. Disqus is free and requires you to sign up and add your website. Integrating Disqus with Foundry is a simple process that differs slightly depending on whether you're using Variant or plain HTML. 
                            </p>
                            <h5 class="uppercase">Retrieving your site's Shortname:</h5>
                            <p class="lead">
								Disqus commments link to your site using your site's 'shortname' this is automatically generated by Disqus based on the information you provided when you added your site to disqus. To access your shortname:
                            </p>
                            <ul class="bullets">
                            	<li>Click the cog in the top-right corner</li>
                            	<li>Select Admin</li>
                            	<li>Click 'Settings' in the far right of the grey menu (if you have multiple sites, select the appropriate site)</li>
                            	<li>Your site's 'shortname' will appear below the 'Site Identity' heading.</li>
                            </ul>
                            <h5 class="uppercase">Linking Disqus with Variant</h5>
                            <p class="lead">
                            	Select the Disqus comments block in Variant. When you hover over the section you'll see a tag button appear in the top-right corner. Click this and you'll see a modal open, place your site's shortname here.
                            </p>
                            
                            <h5 class="uppercase">Linking Disqus with plain HTML</h5>
                            <p class="lead">
								If you're using pure HTML, the Disqus shortname needs to be placed inside the data attribute 'data-shortname' on the disqus-comments div like so:
                            </p>
                            <pre>
                            
	&lt;div class="disqus-comments" data-shortname="mysitesname"&gt;
	  &lt;div id="disqus_thread"&gt;&lt;/div&gt;
	&lt;/div&gt;
                            </pre>
                            
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="referrer"></a>
             <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Capturing referrer via URL <em>ref</em> parameter</h4>
                            <hr>
                            <p class="lead">
                                When creating a landing page, you may wish to track traffic from a particular source.  Foundry allows you to capture the referrer on your email forms, and have it sent through as part of the enquiry email when a user submits an email form to make an enquiry.
                            </p>
                            <p class="lead">
                                For instance, you may like to see which visitors made an enquiry after arriving at your site from your Facebook ad link, or perhaps you have Google Ads that you'd like to track also.  Whichever it is, just add the parameter <em>ref</em> into your links from each source and Foundry will add that referrer info into your email.  Here is an example link:
                            </p>
                            <pre>http://your-website.com/leadpage.html?ref=facebook</pre>
                            
                            <pre>http://your-website.com/leadpage.html?ref=fb</pre>
                            
                            <pre>http://your-website.com/leadpage.html?ref=googleads</pre>
                           
                            <p class="lead bold">How it works</p>
                            <hr>
                            <p class="lead">
                            When the page loads, Foundry will detect if there is a <em>ref</em> parameter and add a hidden field to each email form with the referrer value automatically set.  When the form is sent, the value is picked up on the server side in mail.php and is included as part of the email text.
                            </p>

                            <p class="lead">
                            If there is no referrer parameter set in the URL, nothing happens and nothing is sent through.  You do not have to use it, but the option is there for those who do.
                            </p>
                            
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="maps"></a>
             <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Using Google Maps</h4>
                            <hr>
                            <p class="lead">
                               Foundry offers the use of two different Google map implementations.  The map you see in the demo is an ifrae embedded map but you can also use the google maps javascript API, which requires an API key but allows colour styling of the map, removal of obtrusive UI elements and specifying your own map marker, placed in multiple locations on the map.
                            </p>
                            <h4>iframe embedded map vs javascript API map</h4>
                            <p class="lead">
                                javascript API - Pros: 
                            </p>
                            <ul>
                                <li>Looks better - is already styled to suit the template</li>
                                <li>Does not contain overlaid interface elements in each corner of map</li>
                                <li>Uses your real street address to center the map precisely</li>
                                <li>Easy to use your own map marker/pin image</li>
                                <li>Can show multiple markers set by multiple street addresses</li>
                            </ul>
                            <p class="lead">
                                javascript API - Cons:
                            </p>
                            <ul>
                                <li>You must obtain a Google Maps API key - available <a target="_blank" href="https://developers.google.com/maps/documentation/javascript/tutorial#api_key">free of charge through Google</a></li>
                            </ul>
                            <p class="lead">
                                iframe embedded map - Pros: 
                            </p>
                            <ul>
                                <li>Does not require a Google Maps API key</li>
                            </ul>
                           <p class="lead">
                                iframe embedded map - Cons:
                            </p>
                            <ul>
                                <li>Has the default Google Maps colour and interface, no theme customisation</li>
                                <li>No easy way to use your own map marker/pin image</li>
                                <li>Has overlay boxes and Google Maps controls in each corner of your map</li>
                            </ul>    
                             <p class="lead">
                                We strongly encourage using the javascript API map, not the iframe embed type because the long-term visual appeal vastly outweighs the slight inconvenience of obtaining a Google Maps API key. A Google Maps API key is a seemingly random string of characters which identifies your website to Google when loading the map for your users. The next section explains how to get an API key for your site.
                            </p>            
                        </div>
                    </div><!--end of row-->
                    <a id="getting-an-api-key"></a>
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Obtaining a Google Maps API key - current at July 2015</h4>
                            <hr>
                            <p class="lead">
                                Follow Google's <a target="_blank" href="https://developers.google.com/maps/documentation/javascript/tutorial#api_key">instructions here</a> on how to obtain an API key.  When you have your key, proceed to the next section to learn how to set up your pages with the API key and the map.
                            </p>                            
                        </div>
                    </div><!--end of row-->
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Inserting your Google Maps API key into your page to load a map</h4>
                            <hr>
                            <p class="lead">
                               In Variant, you need to click the <strong>key icon</strong> on the section with your map. When prompted, paste your API key into the box provided and click Save. 

                               This only applies to sections with a Google Maps <strong>javascript API enabled map</strong> - and the key icon will not appear on a section that uses an iframe map, as it is not necessary for an iframe embedded map.
                            </p>     
                            <p class="lead">
                               If you are editing HTML outside of Variant, you need to add a data-maps-api-key attribute to the map container like so: 
                            </p>
                           <pre>

    data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU"
                           </pre>
                            <p class="lead">
                                <em>The above key is a sample only and will not work for your site.</em>
                            </p>
                            <p class="lead">
                                So, your map code would look something like:
                            </p>  
                             <pre style="overflow-wrap: normal;">

    &lt;div class="map-canvas" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" data-address="1095 High Street, Armadale, Victoria"&gt;&lt;/div&gt;
                           </pre>

                        </div>
                    </div><!--end of row-->
                    <a id="setting-map-address"></a>
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Setting the Address to centre your javascript API enabled map (this does not apply to iframe embedded maps)</h4>
                            <hr>
                            <p class="lead">
                               In Variant, you need to click the <strong>pin icon</strong> on the section with your map. When prompted, type your address into the box provided and click Save.  Be as specific as you can with the address, and even provide your state and country to give Google as much information as possible to provide you with an accurate point on the map.  If an abiguous address is given, and no certain location can be matched, no marker will be shown.

                               This only applies to sections with a Google Maps <strong>javascript API enabled map</strong> - setting the address for an iframe embedded map is a different process explained below.
                            </p>     
                            <p class="lead">
                               If you are editing HTML outside of Variant, you need to add a data-address attribute to the map container like so: 
                            </p>
                           <pre>

    data-address="1095 High Street, Armadale, Victoria, Australia"
                           </pre>
                            <p class="lead">
                                So, your map code would look something like:
                            </p>  
                             <pre style="overflow-wrap: normal;">

    &lt;div class="map-canvas" data-address="1095 High Street, Armadale, Victoria" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" &gt;&lt;/div&gt;
                           </pre>

                           <p class="lead">
                                You may also provide precise latitude and longitude points separated by a comma if you know them:
                            </p>  
                             <pre style="overflow-wrap: normal;">

    &lt;div class="map-canvas" data-latlong="-37.858192,145.023019" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" &gt;&lt;/div&gt;
                           </pre>
                           <p class="lead">
                           The <em>data-latlong</em> attribute is optional, and will only be used if no <em>data-address</em> attribute is provided.  You can set the data-latlong attribute in Variant by clicking the target icon on the section containing your Google javascript API enabled map.
                           </p>

                        </div>
                        </div>
                        <a id="styling-your-map"></a>
                         <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Styling Your Map (Google Maps API only)</h4>
                            <hr>  
                            <p class="lead">Google Maps API enabled maps can be styled to show and hide map details, and recolour any element.  The template will use a default colourless style which you can override with your own style using some JSON style code.</p>
                            <p class="lead">You may choose a predefined map style from the hundreds available ar <a href="https://snazzymaps.com/">Snazzy Maps</a>, then simply copy the JSON stye code into Variant.</p>
                            <p class="lead">Alternatively, make your own from scratch with this <a href="http://goo.gl/GJEDaO">Style Generator</a>, then simply copy the JSON stye code into Variant.</p>
                            <p class="lead">In Variant, click the <strong>paintbrush icon</strong> on the section containing your map and paste the full JSON style code from <a href="https://snazzymaps.com/">Snazzy Maps</a> or the <a href="http://goo.gl/GJEDaO">Style Generator</a> into the box provided.  Click <strong>Save</strong> and the map will update with the new style.</p>
                            <p class="lead">If you are editing HTML outside of Variant, add a <strong>data-map-style</strong> attribute to the ma-canvas element.  The JSON code used will need to be edited to make it compatible since the <em>quote</em> character used in the JSON code will break the HTML.  Before pasting your JSON into your HTML page, copy the text into a blank text document and replace all instances of the <strong>"</strong> (quote) character with the string <strong>&amp;quot;</strong> to make the JSON embeddable inside HTML markup.</p>
                            <pre style="overflow-wrap: normal;">

[
  {
    "featureType": "landscape.natural.landcover",
    "stylers": [
      { "visibility": "on" },
      { "weight": 0.7 },
      { "hue": "#00c3ff" }
    ]
  }
]
                            </pre>
                            <p class="lead">If editing HTML manually, The code above needs to be altered to look like the below:</p>
                            <pre style="overflow-wrap: normal;">

[
  {
    &amp;quot;featureType&amp;quot;: &amp;quot;landscape.natural.landcover&amp;quot;,
    &amp;quot;stylers&amp;quot;: [
      { &amp;quot;visibility&amp;quot;: &amp;quot;on&amp;quot; },
      { &amp;quot;weight&amp;quot;: 0.7 },
      { &amp;quot;hue&amp;quot;: &amp;quot;#00c3ff&amp;quot; }
    ]
  }
]
                            </pre>

                            <p>
                               This only applies to sections with a Google Maps <strong>javascript API enabled map</strong> - styling an iframe embedded map is not possible.
                            </p>

                        </div>
                    </div><!--end of row-->
                    <a id="map-markers"></a>
                         <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Map markers</h4>
                            <hr>  
                            <p class="lead">See above on how to edit the address value for your map.</p>
                            <p class="lead">You can provide multiple addresses for your map by separating them with a semicolon.</p>
                            <p class="lead">A marker is added for each address supplied.</p>
                            <p class="lead">The map is always centered around the first address supplied.  This can be a country name if you want.</p>
                            <p class="lead">If you want to show two markers (eg. one at each end of the continent) on your map but centre the map around another point, add <strong>[nomarker]</strong> at the end of the first address.</p>
                            <p class="lead"><strong>[nomarker]</strong> can be added to any address without interfering with the address geocoding, however the map always centres around the first address supplied.</strong></p>
                            <p class="lead">Change the map marker or 'pin' image by replacing mapmarker.png in the template's img folder.</p>
                            <p class="lead">Your mapmarker.png image should be 300 x 300 pixels (which is scaled down to 50 x 50 pixels on the map to account for high-res displays.  Just make sure the point of the pin in your image is in the centre at the bottom of the image.  See the supplied mapmarker.png as an example.</p>
                            
                            <p class="lead">
                                <strong>EXAMPLE 1: Perhaps you have a number of offices across a country - </strong> to add a country with multiple markers, add a country name as the first "address" to centre the map there, and add [nomarker]. Then add some other addresses, all separated by semicolons to show map markers at each address.  See the example address code for Australia (Zoom level 4 = further away) below and the resulting map:
                                
                            </p>
                            <pre style="overflow-wrap: normal;">

    Australia [nomarker]; Perth, Australia; Melbourne, Australia; Sydney, Australia
                           </pre>
                            <p>
                                <img src="img/maps-1.jpg" />
                            </p>
                            <hr>
                            <p class="lead">
                                <strong>EXAMPLE 2: Perhaps you have multiple outlets in one city - </strong> to add a city with multiple markers, specify the middle of a city as the first "address" to centre the map there, and add [nomarker]. Then add a few other addresses, all separated by semicolons to show map markers at each address.  See the example address code for New York (Zoom level 12 = closer) below and the resulting map:
                                
                            </p>
                            <pre style="overflow-wrap: normal;">

    Midtown Manhattan, NYC [nomarker]; Downtown NYC; Lower East Side NYC; Upper West Side NYC
                           </pre>
                            <p>
                                <img src="img/maps-2.jpg" />
                            </p>
                            
                            <p>
                               This only applies to sections with a Google Maps <strong>javascript API enabled map</strong> - setting the address for an iframe embedded map is a different process explained below.
                            </p>
                            <p class="lead">
                                <strong>LIMITATIONS: </strong> Google only allows 10 addresses to be geocoded at one time.  If you reach 10 addresses and need more markers on your map, just add any point by using latitude and longitude coordinates in the same address box.  These are simply comma separated coordinates ended by a semicolon like the textual addresses.  Coordinates can be interspersed with your textual addresses.
                                
                            </p>
                            <pre style="overflow-wrap: normal;">

    Melbourne, Victoria, Australia [nomarker]; -37.855151, 145.018092;  RICHMOND, VIC, AU; collingwood, vic, australia;  -37.851623, 144.991615;  williamstown, vic, au; werribee, vic, au; -37.849578, 145.111392; glen waverley, vic,au; manningham, melbourne, au; boronia victoria; ferntreegully, victoria; caroline springs, vic , au;st albans, vic, au; -38.079153, 145.483336
                           </pre>
                           <p>
                                <img src="img/maps-3.jpg" />
                            </p>
                            <p>
                               Using more than 10 map markers by interspersing addresses with latitude and longitude coordinates.  This only applies to sections with a Google Maps <strong>javascript API enabled map</strong> - setting the address for an iframe embedded map is a different process explained below.
                            </p>

                        </div>
                    </div><!--end of row-->
                    <a id="map-zoom-level"></a>
                     <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Map Zoom Level</h4>
                            <hr>  
                            <p class="lead">
                                You must set the zoom level appropriately to show the map of your desired area at the right size.  In Variant, click the <strong>zoom in</strong> icon on the section with your map and provide a number between 1 and 18 where 18 is fully zoomed in and 1 is zoomed out completely.  In Variant, the map will reset at the specified zoom level.  If you are editing HTML outside of Variant, add a data-map-zoom attribute with a number as the value like so, save, then refresh the page:
                            </p>
                             <pre style="overflow-wrap: normal;">

    &lt;div class="map-canvas" data-map-zoom="12" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" &gt;&lt;/div&gt;
                           </pre>

                            <p>
                               This only applies to sections with a Google Maps <strong>javascript API enabled map</strong> - setting the zoom level for an iframe embedded map is a different process explained below.
                            </p>

                        </div>
                    </div><!--end of row-->
                    <a id="iframe-embedded-map"></a>
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">iframe embedded Google map</h4>
                            <hr>

                            <p class="lead">
                                To embed a simple map without requiring the use of a Google Maps API key, simply visit <a href="https://www.google.com/maps" target="_blank">Google Maps</a> and search for an address.  When you have cetered your map to your desired location and set the appropriate zoom level using the map controls, get the iframe embed code.  At the bottom right-hand corner of the map, click the gear/cog symbol and choose <strong><em>Share or Embed Map</em></strong>.  A new modal window appears - choose the tab at the top that says <strong><em>Embed Map</em></strong> and select the whole code in the given text box starting with <strong>&lt;iframe </strong>... and ending with <strong>&lt;/iframe&gt;</strong>.  Copy that to your to your clipboard with Ctrl+C (Windows) or Command+C (Mac) or right-click -&gt; Copy on your mouse. 
                            </p>
                            <p class="lead">
                                In Variant, click the <strong>pin icon</strong> at the top-right corner of the section containing the map and paste the code from Google Maps into the provided "Edit map Embed" box uaing Ctrl+V (Windows) or Command+V (Mac) or Right-click -&gt; Paste on your mouse.
                            </p>

                             <p class="lead">
                                If editing HTML outside of Variant, simply replace the contents of the iframe <strong>src=" ... "</strong> attribute in the map section of your HTML markup with the contents of the <strong>src=" ... "</strong> attribute of the iframe you copied on Google Maps.
                            </p>
                            
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="mail1"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Linking the mail form via SMTP server</h4>
            				<hr>
            				<p class="lead">
								Your mail form will not work unless you have your files running on a hosting server with PHP 5. When you have your files ready on your hosting server, you need to edit the settings in /mail/mail.php to make the email function work.
							</p>
            				<p class="lead">
            					Please note that you should first get your SMTP mail settings from your hosting provider before proceeding. It is also a good idea to set up your sending email address in cPanel before proceeding. Contact your hosting provider for support in this area, as we don't have access to your system to sort out these details.
            				</p>
            				<p class="lead">
            					Open /mail/mail.php and make the following changes:
            				</p>
            				<ul class="bullets col-md-offset-1">
								<li>
									<strong>Line 13:</strong> Change to your own SMTP mail server address, either a hostname or ip address. Usually <em>mail.yourdomain.com</em> if you want to use your cPanel hosting server's email system. Otherwise you can use your ISP mail server but beware you'll need to provide account login details either way.
								</li>
								<li>
                                    <strong>Line 14:</strong> Change the port number to the port for your outgoing server supplied by your hosting provider.
                                </li>
								<li>
                                    <strong>Line 15:</strong> Change the security layer used by your outgoing/SMTP server.  This can either be 'ssl', 'ssl3', 'tls' or <em>null</em> if you want to use no security layer.  Note that when using <em>null</em>, there are no quote marks around the word, just the word <em>null</em>.
                                </li>
								<li>
                                    <strong>NOTE FOR GMAIL USERS:</strong>
Gmail requires that you use port 587 with TLS security so your lines 13, 14 and 15 would look like this: 
<pre style="overflow-wrap: normal;">

    $outgoingServerAddress      = 'smtp.gmail.com';     // Consult your hosting provider.
    $outgoingServerPort         = '587';                // Options: '587' , '25' - Consult your hosting provider.
    $outgoingServerSecurity     = 'tls';                // Options: 'ssl' , 'tls' , null - Consult your hosting provider.
    
</pre>
                                </li>
								<li>
									<strong>Line 19:</strong> Change to your sending email account username, usually the entire email address at your domain eg: <em>test@mediumra.re</em> . You might need to create an email account in your cPanel for this if you don't already have one set up. Otherwise you can use the SMTP mail account info from your ISP.
								</li>
								
								<li>
									<strong>Line 20:</strong> Change to the password for your sending email account at your domain. You might need to create an email account in your cPanel for this if you don't already have one set up.
								</li>
								
                                <li>
                                    <strong>Line 23:</strong> Change to the email address of the person who will be receiving and handling all the emails from the users who enquire through the website.
                                </li>

								<li>
									<strong>Line 24:</strong> Change to the name of the recipient who will handle all emails that come from the website.
								</li>
								
								<li>
									<strong>Line 27:</strong> Change this to what you want the subject of the email to be in the recipient's email.
								</li>

                                <li>
                                    <strong>Line 28:</strong> Here is where you name your website, for instance "Yum Yum Restaurant Website" - this name will be used when the user does not supply a name, or when there is no email input on the form. Eg. when the form has only name and phone fileds, the email will appear to come from "Yum Yum Restaurant Website".
                                </li>
							</ul>
							<p class="lead">
								You will receive feedback from the Swift Mailer system on your page. You will be given an error until you get the sending settings just right. When the settings are correct, you'll receive a green box with a success message. Swift Mailer is used because it is reliable in sending, and gives feedback when message has been sent.
							</p>
							
							<p class="lead">
								For a full range of documentation on configuring and using the Swift Mailer Library see here: <a href="http://swiftmailer.org/docs/sending.html">http://swiftmailer.org/docs/sending.html</a>
							</p>
							
							<p class="lead">
								If you encounter a "Connection refused" problem with the contact form you may need to contact your server or email host to determine the correct SMTP settings, or fall back to using the standard mail function (see next section).  When you see a timeout message, it could be that the supplied port number or security setting is wrong for your particular SMTP server.
							</p>
							
							<p class="lead">
								Of course we are always here to help too! Please open a support ticket at our forum on <a href="http://mediumrare.ticksy.com" target="_blank">Ticksy</a>
							</p>	
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="mail2"></a>
            <section class="">
            	<div class="container">
            		<div class="row mb64">
            			<div class="col-sm-12 col-md-8 col-md-offset-2">
            				<h4 class="uppercase">Linking the mail form using native PHP mail()</h4>
            				<hr>
            				<p class="lead">
								The Mail Transport sends messages by delegating to PHP's internal mail() function.
							</p>
            				<p class="lead">
								In our experience, the mail() function is not particularly reliable. We only recommend using this if you can't get a satisfactory result using the above mentioned SMTP method.            				
							</p>
            				<p class="lead">
            					The problem with mail() is that it "tries" to simplify things to the point that it actually makes things more complex due to poor interface design. The developers of Swift Mailer have gone to a lot of effort to make the Mail Transport work with a reasonable degree of consistency.
            				</p>
            				<p class="lead">
            					Serious drawbacks when using this Transport are:
            				</p>
            				<ul class="bullets col-md-offset-1">
								<li>
									Unpredictable message headers
								</li>
								
								<li>
									Lack of feedback regarding delivery failures
								</li>
								
								<li>
									Lack of support for several plugins that require real-time delivery feedback
								</li>
							</ul>
							<p class="lead bold">
								It's a last resort, so use SMTP instead where possible.
							</p>
							<hr>
							<h5 class="uppercase">Using the mail transport</h5>
							<p class="lead">
								Open mail/mail.php and make the following changes:
							</p>
							<ul class="bullets col-md-offset-1">
								<li>
									<strong>Line 9:</strong> Make sure line 9 has $emailMethod set to phpmail.  That is, "phpmail" within the quotation marks on the right-hand-side of the equals sign like this:
								</li>
							</ul>
<pre style="overflow-wrap: normal;">

    $emailMethod                = 'phpmail'; // REQUIRED value. Options: 'smtp' , 'phpmail'
   
</pre>
							
							<p class="lead">
								For a full range of documentation on configuring and using the Swift Mailer Library see here: <a href="http://swiftmailer.org/docs/sending.html">http://swiftmailer.org/docs/sending.html</a>
							</p>
							
							<p class="lead">
								Of course we are always here to help too! Please open a support ticket at our forum on <a href="http://mediumrare.ticksy.com" target="_blank">Ticksy</a>
							</p>	
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="confirmation"></a>
            <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Redirecting to a confirmation page</h4>
                            <hr>
                            <p class="lead">
                                Foundry can redirect your users to a confirmation page after successful submission of email forms or newsletter signup (MailChimp / Campaign Monitor) forms.  
                            </p>

                            <p class="lead">
                                Default behaviour is to send the form then display a success message in a green box.  Setting the <em>success-redirect</em> parameter on any form will override the default behaviour and send the user to your specified page instead of showing the green box.  A form with a success redirect parameter would look like this: 
                            </p>
                            <pre style="overflow-wrap: normal;">

    &lt;form class=&quot;form-email&quot; <strong>success-redirect=&quot;http://mediumra.re/thanks.html&quot;</strong> data-success=&quot;Thanks for your submission, we will be in touch shortly.&quot; data-error=&quot;Please fill all fields correctly.&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;validate-required&quot; name=&quot;name&quot; placeholder=&quot;Your Name&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;validate-required validate-email&quot; name=&quot;email&quot; placeholder=&quot;Email Address&quot;&gt;
        &lt;textarea class=&quot;validate-required&quot; name=&quot;message&quot; rows=&quot;4&quot; placeholder=&quot;Message&quot;&gt;&lt;/textarea&gt;
        &lt;input type=&quot;submit&quot; value=&quot;Send Message&quot;&gt;
    &lt;/form&gt
                            </pre>
                            <p class="lead">
                                The address given in the <em>success-redirect</em> attribute should be a fully formed URL including <em>http://</em> to ensure maximum compatibility.
                            </p>
                             <p class="lead">
                                If the attribute <em>success-redirect</em> is left blank, or not included in the form tag, the default behaviour will occur (green box success message appears).
                            </p>
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="ajax-mailchimp-campaignmonitor"></a>
            <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Ajax MailChimp and Campaign Monitor forms</h4>
                            <hr>
                            <p class="lead">
                                Foundry forms in <strong>versions 1.8.0 and newer</strong> can be used to sign up your users to MailChimp and Campaign Monitor mailing lists without reloading the page, opening a new page, or redirecting to another page.  
                            </p>
                            <p class="lead">
                                The forms are handled by ajax in scripts.js and older forms (Foundry versions 1.7.x and older) can easily be modified to submit via ajax also.  To update an older form, simply replace the submit button on your form:</p>
                                <pre style="overflow-wrap: normal;">

    &lt;input type=&quot;submit&quot; value=&quot;Sign up now!&quot; /&gt;
                            </pre>
                            <p class="lead">
                            with the following:
                            </p>
                             <pre style="overflow-wrap: normal;">

    &lt;button type=&quot;submit&quot;&gt;Sign up now!&lt;/button&gt;

</pre>
                             <p class="lead">
                         This change is required by scripts.js to show the loading animation inside the submit button when the user has clicked to submit the form.  You then need to update your scripts.js by replacing the copy in your site's <strong>/js/</strong> folder with the version from the newer 1.8.x scripts.js file in your download package.
                            </p>
                            <p class="lead">
                         In Foundry version 1.8.0, the scripts.js file reads the contents of the iframe containing your MailChimp / Campaign Monitor form and uses the inputs and action parameter to submit the form via ajax.  A future update after 1.8.0 will discontinue the use of the iframe method altogether.
                            </p>

                            <p class="lead">
                                Setting the <em>success-redirect</em> parameter on a MailChimp or Campaign Monitor form will override the default <em>success behaviour</em> and send the user to your specified page instead of showing the green <strong>success</strong> box.  See forms section for how to implement <strong>success-redirect</strong> attribute.
                            </p>
                            
                            </p>
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <a id="iframe-mailchimp-campaignmonitor"></a>
            <section class="">
                <div class="container">
                    <div class="row mb64">
                        <div class="col-sm-12 col-md-8 col-md-offset-2">
                            <h4 class="uppercase">Embedding MailChimp and Campaign Monitor forms</h4>
                            <hr>
                            <p class="lead">
                                The easiest way to embed a MailChimp or Campaign Monitor form in Foundry is to <strong>use Variant to embed the form</strong> and let it generate the necessary code.  The reason for this is that Variant encodes the embed form to make it embeddable in Foundry's iframe.
                            </p>
                            <p class="lead">
                                Open your Campaign Monitor or MailChimp account and copy the form code from there to your clipboard.  Open Variant, select the form section that matches the section you want to use, and click the envelope icon to bring up the "Embed Newsletter Form" dialog box.  Paste in the whole code you copied from your mail list provider and click <strong>Save</strong>.  Then click <strong>GET HTML</strong> on Variant's sidebar and copy the iframe into your HTML Page.  If you are using Variant to build your page, this will all be done for you.
                            </p>
                            <p class="lead">
                                If you are working from an example MailChimp / Campaign Monitor form shown in one of the demo pages included with the template, your form will be ready to go and will submit via ajax.  A later version of Foundry will discontinue use of the iframe method altogether.
                            </p>
                        </div>
                    </div><!--end of row-->
                </div><!--end of container-->
            </section>
            <footer class="footer-1 bg-dark pt120">
                <div class="container">
                    <div class="row text-center">
                    	<h4 class="uppercase">Did we forget something?</h4>
                    	<a class="btn btn-lg mb80" href="http://mediumrare.ticksy.com/" target="_blank">Visit Our Support Forum</a>
                    </div>
                </div>
                <!--end of container-->
                <a class="btn btn-sm fade-3-4 back-to-top inner-link" href="#top">Take Me Topside&nbsp;&nbsp; <i class="ti-arrow-up"></i></a>
            </footer>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/masonry.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/ytplayer.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/parallax.js"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>